<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>

    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--引入抽取的topbar-->
<!--模板名：会使用thymeleaf的前后缀配置规则进行解析-->
<div th:replace="commons/bar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!--引入侧边栏-->
        <div th:replace="commons/bar::#sidebar(activeUri='/members')"></div>

        <n role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h3>品牌管理：</h3>

            <form id="" method="post" th:action="@{/getCars}">
                国家:
                <select id="carMake">

                    <div>
                        <option>中国</option>
                        <option>美国</option>
                        <option>德国</option>
                    </div>

                </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


                <input type="text" name="username" placeholder="品牌/品牌代码">
                <input type="submit" value="搜索">
            </form>

            <div class="container">
                <!-- 按钮：用于打开模态框 -->
                <button type="button" style="float: right" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal1">
                    新增
                </button>

                <!-- 模态框 -->
                <div class="modal fade" id="myModal1">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title">新增品牌</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <form method="post" th:action="@{/carMake/addCarMake}">
                                <!-- 模态框主体 -->
                                <div class="modal-body">

                                    <div class="form-group">
                                        <label for="" class="col-sm-3 control-label">品牌名称：</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="name" value="" id="nameId"
                                                   placeholder="品牌名称">
                                        </div>
                                    </div>
                                    <br/>

                                    <label for="" class="col-sm-3 control-label">品牌logo：</label>
                                    <input type="file" th:value="选择" name="logoUrl">

                                </div>

                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>


                </select>
                <div class="table-responsive">

                    <table class="table table-striped table-sm" style="text-align: center">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>品牌名称</th>
                            <th>logo</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr th:each="carMake,carMakes:${carMakes}">
                            <td th:text="${carMakes.count}"></td>
                            <td th:text="${carMake.id}" th:hidden="true"></td>
                            <td th:text="${carMake.name}"></td>
                            <td><img th:src="${carMake.logoUrl}" width="15" height="32"></td>
                            <!--<img th:src="@{/${asserts.BMW.jpg}}" width="15" height="32" />-->
                            <!--<td th:text="${carMake.logoUrl}"></td>-->
                            <td th:text="${carMake.createTime}"></td>
                            <td>
                                <input type="hidden" th:value="${carMake.id}">
                                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                        data-target="#myModal2" onclick="update3(this)">
                                    编辑
                                </button>

                                <a class="btn btn-sm btn-primary" href="emp"
                                   th:href="@{/carMake/deleteCarMake/}+${carMake.id}">删除</a>
                            </td>
                        </tr>
                        </tbody>

                        <!-- 模态框 -->
                        <div class="modal fade" id="myModal2">
                            <div class="modal-dialog">
                                <div class="modal-content">

                                    <!-- 模态框头部 -->
                                    <div class="modal-header">
                                        <h4 class="modal-title">修改品牌</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <form method="post" th:action="@{/carMake/updateCarMake}">
                                        <!-- 模态框主体 -->
                                        <div class="modal-body">

                                            <div class="form-group">
                                                <label for="" class="col-sm-3 control-label">品牌名称：</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" name="name"  id="name"
                                                           placeholder="品牌名称">
                                                </div>
                                            </div>
                                            <br/>

                                            <input type="hidden" name="id" id="id">

                                            <label for="" class="col-sm-3 control-label">品牌logo：</label>
                                            <input type="file" th:value="选择" id="carMake1" name="logoUrl">


                                        </div>

                                        <!-- 模态框底部 -->
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                            <button type="submit" class="btn btn-primary">保存</button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>

                    </table>
                </div>
                </main>


                <form id="deleteEmpForm" method="post">
                    <input type="hidden" name="_method" value="delete"/>
                </form>
            </div>
    </div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->

</body>


<script type="text/javascript" th:inline="javascript">

    function update3(e) {
        var context = /*[[@{/}]]*/'';
        var id = $(e).prev().val();
        $.get(context+"carMake/getCarMake",
            {id:id},
            function (data) {
                $("#name").val(data.name);
                $("#carMake2").val(data.logoUrl);
                $("#id").val(data.id)

        })
    }

</script>

</html>